<template>
  <div class="login-container">
    <!-- 背景动画效果 -->
    <div class="bg-animation">
      <div class="log-lines">
        <div v-for="i in 15" :key="i" class="log-line" :style="{ animationDelay: `${i * 0.5}s` }">
          <span class="log-time">[{{ formatTime(i) }}]</span>
          <span class="log-level" :class="`level-${getRandomLevel()}`">{{ getRandomLevel() }}</span>
          <span class="log-msg">{{ getRandomLogMessage(i) }}</span>
        </div>
      </div>
    </div>

    <div class="login-box">
      <!-- 左侧特性展示 -->
      <div class="login-left">
        <div class="brand-section">
          <div class="terminal-window">
            <div class="terminal-header">
              <div class="terminal-buttons">
                <span class="btn-close"></span>
                <span class="btn-minimize"></span>
                <span class="btn-maximize"></span>
              </div>
              <span class="terminal-title">log-analyzer.sh</span>
            </div>
            <div class="terminal-body">
              <div class="terminal-line">
                <span class="prompt">$</span>
                <span class="command"> ./log-analyzer --start</span>
              </div>
              <div class="terminal-line">
                <span class="output success">✓ System initialized</span>
              </div>
              <div class="terminal-line">
                <span class="output">→ Loading modules...</span>
              </div>
              <div class="terminal-line blink">
                <span class="prompt">$</span>
                <span class="cursor">_</span>
              </div>
            </div>
          </div>
          
          <h1 class="brand-title">
            <el-icon :size="40" style="vertical-align: middle; margin-right: 10px;">
              <TrendCharts />
            </el-icon>
            日志分析平台
          </h1>
          <p class="brand-subtitle">Log Analysis Platform</p>
          
          <div class="features">
            <div class="feature-item" v-for="(feature, index) in features" :key="index">
              <el-icon :size="20">
                <component :is="feature.icon" />
              </el-icon>
              <span>{{ feature.text }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧登录表单 -->
      <div class="login-right">
        <div class="login-form-wrapper">
          <div class="form-header">
            <h2 class="form-title">系统登录</h2>
            <p class="form-subtitle">SYSTEM LOGIN</p>
          </div>
          
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            class="login-form"
          >
            <el-form-item prop="username">
              <div class="input-wrapper">
                <label class="input-label">USERNAME</label>
                <el-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  size="large"
                  :prefix-icon="User"
                  class="custom-input"
                />
              </div>
            </el-form-item>
            
            <el-form-item prop="password">
              <div class="input-wrapper">
                <label class="input-label">PASSWORD</label>
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  size="large"
                  :prefix-icon="Lock"
                  show-password
                  class="custom-input"
                  @keyup.enter="handleLogin"
                />
              </div>
            </el-form-item>
            
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                :loading="loading"
                @click="handleLogin"
                class="login-button"
              >
                <el-icon v-if="!loading" style="margin-right: 8px;">
                  <Unlock />
                </el-icon>
                {{ loading ? '登录中...' : '立即登录' }}
              </el-button>
            </el-form-item>
          </el-form>
          
<!--          <div class="test-accounts">-->
<!--            <div class="accounts-headesr">-->
<!--              <el-icon><InfoFilled /></el-icon>-->
<!--              <span>测试账号</span>-->
<!--            </div>-->
<!--            <div class="accounts-list">-->
<!--              <div class="account-item">-->
<!--                <span class="role admin">管理员</span>-->
<!--                <span class="credentials">admin / 123456</span>-->
<!--              </div>-->
<!--              <div class="account-item">-->
<!--                <span class="role operator">运维员</span>-->
<!--                <span class="credentials">operator1 / 123456</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { 
  User, 
  Lock, 
  Unlock, 
  TrendCharts, 
  InfoFilled,
  Monitor,
  DataAnalysis,
  Bell,
  Connection
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

const loginFormRef = ref(null)
const loading = ref(false)

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6位', trigger: 'blur' }
  ]
}

// 特性列表
const features = [
  { icon: Monitor, text: '实时监控' },
  { icon: DataAnalysis, text: '智能分析' },
  { icon: Bell, text: '告警通知' },
  { icon: Connection, text: '多源接入' }
]

// 模拟日志消息
const logMessages = [
  'User authentication successful',
  'Database connection established',
  'Cache warming completed',
  'API request processed',
  'System health check passed',
  'Log collection started',
  'Data synchronization complete',
  'Service started on port 8080',
  'Memory usage: 45%',
  'Request handling time: 15ms',
  'Session created successfully',
  'Configuration loaded',
  'SSL certificate validated',
  'Backup task completed',
  'Performance metrics updated'
]

const logLevels = ['INFO', 'WARN', 'ERROR', 'DEBUG']

// 格式化时间
const formatTime = (index) => {
  const now = new Date()
  now.setSeconds(now.getSeconds() - index * 2)
  return now.toTimeString().split(' ')[0]
}

// 随机日志等级
const getRandomLevel = () => {
  return logLevels[Math.floor(Math.random() * logLevels.length)]
}

// 随机日志消息
const getRandomLogMessage = (index) => {
  return logMessages[index % logMessages.length]
}

const handleLogin = async () => {
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      const success = await userStore.login(loginForm)
      loading.value = false
      
      if (success) {
        router.push('/dashboard')
      }
    }
  })
}
</script>

<style scoped lang="scss">
// 主容器
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

// 背景动画 - 日志流动效果
.bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.15;
  pointer-events: none;
}

.log-lines {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  color: #00ff00;
}

.log-line {
  position: absolute;
  white-space: nowrap;
  animation: scrollLog 20s linear infinite;
  
  &:nth-child(odd) {
    left: -100%;
  }
  
  &:nth-child(even) {
    right: -100%;
    animation-direction: reverse;
  }
  
  &:nth-child(1) { top: 6%; }
  &:nth-child(2) { top: 12%; }
  &:nth-child(3) { top: 18%; }
  &:nth-child(4) { top: 24%; }
  &:nth-child(5) { top: 30%; }
  &:nth-child(6) { top: 36%; }
  &:nth-child(7) { top: 42%; }
  &:nth-child(8) { top: 48%; }
  &:nth-child(9) { top: 54%; }
  &:nth-child(10) { top: 60%; }
  &:nth-child(11) { top: 66%; }
  &:nth-child(12) { top: 72%; }
  &:nth-child(13) { top: 78%; }
  &:nth-child(14) { top: 84%; }
  &:nth-child(15) { top: 90%; }
}

@keyframes scrollLog {
  from { transform: translateX(0); }
  to { transform: translateX(200%); }
}

.log-time {
  color: #00bcd4;
  opacity: 0.8;
}

.log-level {
  padding: 2px 8px;
  margin: 0 8px;
  border-radius: 3px;
  font-weight: bold;
  
  &.level-INFO {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
  }
  
  &.level-WARN {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
  }
  
  &.level-ERROR {
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
  }
  
  &.level-DEBUG {
    color: #9c27b0;
    background: rgba(156, 39, 176, 0.1);
  }
}

.log-msg {
  color: #00ff00;
  opacity: 0.6;
}

// 登录盒子
.login-box {
  display: flex;
  width: 1100px;
  min-height: 650px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
}

// 左侧品牌展示
.login-left {
  flex: 1;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300ff00' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
  }
}

.brand-section {
  text-align: center;
  color: white;
  position: relative;
  z-index: 1;
}

// 终端窗口
.terminal-window {
  background: #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.terminal-header {
  background: #323232;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #444;
}

.terminal-buttons {
  display: flex;
  gap: 6px;
  
  span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    
    &.btn-close { background: #ff5f56; }
    &.btn-minimize { background: #ffbd2e; }
    &.btn-maximize { background: #27c93f; }
  }
}

.terminal-title {
  flex: 1;
  text-align: center;
  color: #999;
  font-size: 12px;
  font-family: 'Consolas', monospace;
}

.terminal-body {
  padding: 20px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.8;
}

.terminal-line {
  color: #d4d4d4;
  
  &.blink {
    animation: blink 1s infinite;
  }
}

.prompt {
  color: #4ec9b0;
  margin-right: 8px;
}

.command {
  color: #dcdcaa;
}

.output {
  color: #9cdcfe;
  
  &.success {
    color: #4ec9b0;
  }
}

.cursor {
  color: #fff;
  background: #fff;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

// 品牌标题
.brand-title {
  font-size: 36px;
  font-weight: 700;
  margin: 20px 0 10px;
  background: linear-gradient(135deg, #00ff88, #00ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-subtitle {
  font-size: 14px;
  color: #00ccff;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 40px;
}

// 特性列表
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 40px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s;
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #00ff88;
    transform: translateY(-2px);
  }
  
  .el-icon {
    color: #00ff88;
  }
  
  span {
    font-size: 14px;
    color: #fff;
  }
}

// 右侧登录表单
.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  background: #ffffff;
}

.login-form-wrapper {
  width: 100%;
  max-width: 420px;
}

.form-header {
  text-align: center;
  margin-bottom: 50px;
}

.form-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.form-subtitle {
  font-size: 12px;
  color: #00ccff;
  letter-spacing: 2px;
  font-weight: 600;
}

// 表单样式
.login-form {
  .input-wrapper {
    margin-bottom: 5px;
  }
  
  .input-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  
  .custom-input {
    :deep(.el-input__wrapper) {
      border-radius: 8px;
      border: 2px solid #e0e0e0;
      transition: all 0.3s;
      
      &:hover {
        border-color: #00ccff;
      }
      
      &.is-focus {
        border-color: #00ff88;
        box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
      }
    }
  }
  
  .login-button {
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: none;
    margin-top: 20px;
    letter-spacing: 1px;
    transition: all 0.3s;
    
    &:hover {
      background: linear-gradient(135deg, #16213e 0%, #0f2027 100%);
      box-shadow: 0 8px 24px rgba(26, 26, 46, 0.4);
      transform: translateY(-2px);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
}

// 测试账号
.test-accounts {
  margin-top: 40px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0, 204, 255, 0.05), rgba(0, 255, 136, 0.05));
  border: 1px solid rgba(0, 204, 255, 0.2);
  border-radius: 8px;
}

.accounts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: #00ccff;
  font-size: 14px;
  font-weight: 600;
}

.accounts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  transition: all 0.3s;
  
  &:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(5px);
  }
}

.role {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  
  &.admin {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
  }
  
  &.operator {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
  }
}

.credentials {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

// 响应式设计
@media (max-width: 1024px) {
  .login-box {
    width: 90%;
    flex-direction: column;
  }
  
  .login-left {
    padding: 40px;
  }
  
  .terminal-window {
    margin-bottom: 20px;
  }
  
  .features {
    grid-template-columns: 1fr;
  }
}
</style>

